<template>
  <div class="information">
    <ReturnBack></ReturnBack>
    <van-form @submit="onSubmit">
    <van-cell class="portrait">
      头像
      <van-uploader :after-read="afterRead" style="float: right;"/>
    </van-cell>
    <van-cell is-link v-for="(item, index) in list" :key="index" :to="item.path">
      {{ item.name }}
      <!-- 程序员逻辑 -->
      <van-tag plain  class="label" @click="change" v-if="item.name=='性别'"> {{item.label}} </van-tag>
      <van-tag plain  class="label"  v-else> {{item.label}} </van-tag>
    </van-cell>
    <van-action-sheet v-model="show" title="选择性别" :actions="actions" cancel-text="取消" round @select="onSelect">
    </van-action-sheet>
      <div style="margin: 16px 0">
        <van-button round block type="info" native-type="submit" style="border:none;
        background-color:#fff;color:black;border-radius:0;">退出当前账户</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import ReturnBack from '@/components/return.vue'
export default {
  name: 'InformationVue',
  data () {
    return {
      list: [
        { name: '昵称', path: '/me/information/setNickname', label: 'admin' },
        { name: '性别', path: '', label: '保密' }, { name: '密码设置', path: '/me/information/setPassword' },
        { name: '手机号', path: '', label: '13J43QKKKAAA' }
      ],
      show: false,
      actions: [
        { name: '保密' },
        { name: '男' },
        { name: '女' }
      ],
      round: false
    }
  },
  components: {
    ReturnBack
  },
  mounted () {
    console.log(this.$store.state.user)
    this.list[0].label = this.$store.state.user
  },
  methods: {
    afterRead (file) {
      // 此时可以自行将文件上传至服务器
      console.log(file)
    },
    onSubmit () {
      window.localStorage.clear()
      this.$router.push('/')
    },
    confirm () {
      console.log('确认')
    },
    cancel () {
      console.log('取消')
    },
    onSelect (item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show = false
      this.list[1].label = item.name
      console.log(item)
    },
    change () {
      this.show = true
    }
  }
}
</script>

<style lang="scss" scoped>
.portrait{
  width: 100%;
}
.information{
  height: 667px;
  background-color: #f2f2f2;
}
.label{
  border-color: #fff;
  float: right;
  font-size: .35rem;
}
.content {
  padding: 16px 16px 160px;
}
</style>
